[ui] Homepage: Highlight the pipeline or project that is being loaded#3080
[ui] Homepage: Highlight the pipeline or project that is being loaded#3080
Conversation
…urrent frame Forcing the loading actions to start after the current frame has been rendered prevents from blocking the GUI as soon as the user has clicked on a project/pipeline while it is being loaded.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## develop #3080 +/- ##
========================================
Coverage 83.35% 83.35%
========================================
Files 73 73
Lines 9882 9890 +8
========================================
+ Hits 8237 8244 +7
- Misses 1645 1646 +1 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Pull request overview
This PR adds a “loading/selected” visual state on the Homepage when the user clicks a pipeline or recent project, ensuring the highlight/spinner is rendered before starting the synchronous load that blocks the UI thread.
Changes:
- Add
isLoading+loadingIndexstate to track which pipeline/project is being loaded and dim non-selected items. - Introduce
executeAfterFrameRendered()using_window.frameSwappedto defer the heavy load until after a frame is presented. - Add highlight borders and BusyIndicators to pipeline and project delegates during loading.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| enabled: !root.isLoading || index === pipelinesListView.loadingIndex | ||
| opacity: (!root.isLoading || index === pipelinesListView.loadingIndex) ? 1.0 : 0.4 |
There was a problem hiding this comment.
enabled: !root.isLoading || index === pipelinesListView.loadingIndex leaves the selected pipeline button enabled while root.isLoading is true. This allows repeated clicks on the same item during the short window before the heavy operation starts, potentially scheduling multiple executeAfterFrameRendered callbacks and pushing multiple Application pages / calling _currentScene.new multiple times. Consider disabling all pipeline delegates while loading (or at least adding a re-entrancy guard so subsequent clicks are ignored).
| function onClicked() { | ||
| // Open pipeline | ||
| mainStack.push("Application.qml") | ||
| _currentScene.new(modelData["path"]) | ||
| root.isLoading = true | ||
| pipelinesListView.loadingIndex = index | ||
| let path = modelData["path"] | ||
| root.executeAfterFrameRendered(function() { |
There was a problem hiding this comment.
executeAfterFrameRendered connects to _window.frameSwapped every time it’s called. Since onClicked for pipelines doesn’t guard against root.isLoading, repeated clicks can create multiple pending connections, and all of them will fire on the next frame swap. Add an early return when root.isLoading is already true (or ensure only one pending callback can be registered at a time).
| root.isLoading = true | ||
| homepageGridView.loadingIndex = index | ||
| let path = modelData["path"] | ||
| root.executeAfterFrameRendered(function() { | ||
| mainStack.push("Application.qml") | ||
| if (_currentScene.load(path)) { | ||
| MeshroomApp.addRecentProjectFile(path) | ||
| } else { | ||
| root.isLoading = false | ||
| homepageGridView.loadingIndex = -1 | ||
| } | ||
| }) |
There was a problem hiding this comment.
The project open logic (set isLoading, set loadingIndex, defer to executeAfterFrameRendered, push Application, attempt _currentScene.load, then reset on failure) is duplicated in both the left-click handler and the context menu "Open" action. Consider extracting this into a single helper function (e.g., openProjectAtIndex(path, index)) to avoid the two paths drifting and to keep future changes (like resetting state, error handling, or navigation) consistent.
Description
This PR highlights the pipeline or project that is clicked on (and then loaded in the application) on the Homepage. In particular, it pushes a graphical update right before the loading process is started, ensuring the Homepage will display the loading state.
The selected project or pipeline will be highlighted with a colored border and a busy indicator, while the non-selected projects/pipelines will have their opacity dimmed.
Implementation remarks
The
executeAfterFrameRenderedfunction has been added to ensure that a graphical update is pushed before processing the load of the selected project/pipeline, which then blocks the UI.Closes #2812.